<template>
  <div>
    <mNavHead />
    <mBanner :initialSwipe="0" />
    <mTitlebox :titleboxcontent="titleboxcontent" />
    <div class="syjlkimg">
      <img class="img" src="../../assets/img/aboutsmallimg.pngc.png" alt="" />
    </div>
    <mTitlebox :titleboxcontent="titleboxcontent2" />
    <div class="box_product">
      <div class="product">
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/wkfxccc2.png" alt="" />
          </div>
          <div class="tit">无卡发薪</div>
          <p>无需银⾏卡，⼀秒批量⽀付到员⼯微信零钱</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/syzpccc2.png" alt="" />
          </div>
          <div class="tit">私域招聘</div>
          <p>为人力公司打造属于自己的私域流量池</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/ygkccc2.png" alt="" />
          </div>
          <div class="tit">员工库</div>
          <p>随时随地跟员工沟通，可一键批量发通知给员工</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/dzhtccc2.png" alt="" />
          </div>
          <div class="tit">电子合同</div>
          <p>在线一键签约，操作便捷易保存、易查询</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/dzkqccc2.png" alt="" />
          </div>
          <div class="tit">电子考勤</div>
          <p>自动生成考勤报表，彻底摆脱手工做考勤</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/bjjmdccc2.png" alt="" />
          </div>
          <div class="tit">便捷记名单</div>
          <p>员工扫码生成花名册，驻厂现场就能做好名单</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/tdxzccc2.png" alt="" />
          </div>
          <div class="tit">团队协作</div>
          <p>供应商、经纪人、驻厂、老板共同管理项目</p>
        </div>
        <div class="product_item">
          <div class="img">
            <img src="../../assets/img/gxspccc2.png" alt="" />
          </div>
          <div class="tit">高效审批</div>
          <p>随时随地审批，支持自主设置审批规则、审批模板</p>
        </div>
      </div>
    </div>
    <mTitlebox :titleboxcontent="titleboxcontent3" />
    <div class="pd40">
      <div class="helper">
        <div class="tab">
          <div class="tab_helper_box">
            <div class="tab_helper">
              <div :class="{ active: tabhelpflag === 0 }" @click="changetab_helper(0)">
                拓客引流
              </div>
              <div :class="{ active: tabhelpflag === 1 }" @click="changetab_helper(1)">
                营销转化
              </div>
              <div :class="{ active: tabhelpflag === 2 }" @click="changetab_helper(2)">
                客户运营
              </div>
            </div>
          </div>
        </div>
        <div class="help_content" v-show="tabhelpflag === 0">
          <div class="title">全渠道获客引流</div>
          <div class="stit">打通商家全渠道，智能加好友、活码等多种形式，高效私域引流</div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>群组活码</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>批量加客户</span>
            </div>
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>欢迎语</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>自动分流</span>
            </div>
          </div>
          <div class="todetail">
            <div></div>
            <div @click="tohelp">
              查看详情 <img src="../../assets/img/morexxx2.png" alt="" />
            </div>
          </div>
          <div class="img">
            <img src="../../assets/img/tkylxx.png" alt="" />
          </div>
        </div>
        <div class="help_content" v-show="tabhelpflag === 1">
          <div class="title">抓住用户激活黄金期</div>
          <div class="stit">
            识别消息关键词，智能回复企业话术库预设消息，会话内容实时存档
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>营销工具</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>内容管理</span>
            </div>
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>群发工具</span>
            </div>
          </div>
          <div class="todetail">
            <div></div>
            <div @click="tohelp">
              查看详情 <img src="../../assets/img/morexxx2.png" alt="" />
            </div>
          </div>
          <div class="img">
            <img src="../../assets/img/tkylxx.png" alt="" />
          </div>
        </div>
        <div class="help_content" v-show="tabhelpflag === 2">
          <div class="title">洞悉用户喜好 精准内容推送</div>
          <div class="stit">线上线下多场景快速添加客户微信</div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>群画像</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>流失提醒</span>
            </div>
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span
                >朋友圈/群SOP</span
              >
            </div>
          </div>
          <div class="todetail">
            <div></div>
            <div @click="tohelp">
              查看详情 <img src="../../assets/img/morexxx2.png" alt="" />
            </div>
          </div>
          <div class="img">
            <img src="../../assets/img/khyyxxx2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <mTitlebox :titleboxcontent="titleboxcontent4" />
    <div class="pd40">
      <div class="insurance">
        <div class="tab">
          <div class="tab_helper_box">
            <div class="tab_helper">
              <div
                :class="{ active: tabinsuranceflag === 0 }"
                @click="changetab_insuranceer(0)"
              >
                场景工种全
              </div>
              <div
                :class="{ active: tabinsuranceflag === 1 }"
                @click="changetab_insuranceer(1)"
              >
                随时投保
              </div>
              <div
                :class="{ active: tabinsuranceflag === 2 }"
                @click="changetab_insuranceer(2)"
              >
                极速理赔
              </div>
            </div>
          </div>
        </div>
        <div class="help_content" v-show="tabinsuranceflag === 0">
          <div class="title">保险产品丰富、覆盖场景多</div>
          <div class="stit">多行业、全场景灵活投保</div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>场景工种全</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>保障时间久</span>
            </div>
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>理赔范围广</span>
            </div>
          </div>
          <div class="todetail">
            <div></div>
            <div @click="tobx">
              查看详情 <img src="../../assets/img/morexxx2.png" alt="" />
            </div>
          </div>
          <div class="img">
            <img src="../../assets/img/gsbxccccx.png" alt="" />
          </div>
        </div>
        <div class="help_content" v-show="tabinsuranceflag === 1">
          <div class="title">在线加减保</div>
          <div class="stit">手机随时随地投保、加保、减保</div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>营销工具</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>内容管理</span>
            </div>
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>群发工具</span>
            </div>
          </div>
          <div class="todetail">
            <div></div>
            <div @click="tobx">
              查看详情 <img src="../../assets/img/morexxx2.png" alt="" />
            </div>
          </div>
          <div class="img">
            <img src="../../assets/img/sstbxxx2.png" alt="" />
          </div>
        </div>
        <div class="help_content" v-show="tabinsuranceflag === 2">
          <div class="title">⼀般事故理赔流程简化 小额快速理赔</div>
          <div class="stit">线上线下多场景快速添加客户微信</div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>在线报案</span>
            </div>
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span>极速理赔</span>
            </div>
          </div>
          <div class="tag">
            <div>
              <img src="../../assets/img/icon-check.png" alt="" /><span
                >朋友圈/理赔无忧</span
              >
            </div>
          </div>
          <div class="todetail">
            <div></div>
            <div @click="tobx">
              查看详情 <img src="../../assets/img/morexxx2.png" alt="" />
            </div>
          </div>
          <div class="img">
            <img src="../../assets/img/jslpccc.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <mTitlebox :titleboxcontent="titleboxcontent1" />
    <div class="friends">
      <div class="img">
        <img src="../../assets/img/h5wxzf.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/h5jd.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/h5sfsy.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/zfbccc.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/cnccc.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/ztccc.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/stccc.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/ydccc.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/jt.png" alt="" />
      </div>
      <div class="img">
        <img src="../../assets/img/zgbxccc.png" alt="" />
      </div>
    </div>
    <mFooter></mFooter>
  </div>
</template>
<script>
import mBanner from "~/components/m-banner.vue";
import mContentComponent from "~/components/m-content-component.vue";
import mNavHead from "~/components/m-nav-head";
import mTitlebox from "~/components/m-titlebox";
import mFooter from "~/components/m-footer";
export default {
  components: {
    mBanner,
    mContentComponent,
    mNavHead,
    mTitlebox,
    mFooter,
  },
  data() {
    return {
      tabhelpflag: 0,
      tabinsuranceflag: 0,
      titleboxcontent: {
        top: "每一个环节都值得做私域流量沉淀",
        bottom: "人力公司SaaS平台",
      },
      titleboxcontent2: {
        top: "子弹人力云八大核心产品",
        bottom: "覆盖全渠道、全行业、全场景需求",
      },
      titleboxcontent3: {
        top: "子弹企微助手",
        bottom: "企微助手实现全流量承接与高效用户运营",
      },
      titleboxcontent4: {
        top: "工伤保险",
        bottom: "覆盖场景多、工种全，支持日保、周期保，跨天无忧",
      },
      titleboxcontent1: {
        top: "合作伙伴",
        bottom: "他们都在用子弹人力云产品",
      },
      contentData: {
        title: "每一个环节都值得做私域流量沉淀",
        subTitle: "人力公司SaaS平台",
        isCheckIcon: false,
        list: [
          {
            icon: require("../../assets/img/zszjzhc.png"),
            name: "专属资金账户",
            content: "员工实名效验机制，银行级别安全保障",
          },
          {
            icon: require("../../assets/img/zszjzhc.png"),
            name: "专属资金账户1",
            content: "员工实名效验机制，银行级别安全保障",
          },
        ],
        img: require("../../assets/img/yyglcx2.png"),
      },
    };
  },
  methods: {
    changetab_helper(i) {
      this.tabhelpflag = i;
    },
    changetab_insuranceer(i) {
      this.tabinsuranceflag = i;
    },
    tobx() {
      this.$router.push("/m/m-sass-insurance");
    },
    tohelp() {
      this.$router.push({ path: "/m/m-sass-helper" });
    },
  },
  mounted() {
    // const userAgent = navigator.userAgent.toLowerCase();
    // if (userAgent.includes("mobile")) {
    //   this.$router.replace({
    //     path: "/m/home",
    //   });
    // } else {
    //   this.$router.replace({
    //     path: "/",
    //   });
    // }
  },
};
</script>
<style lang="scss" scoped>
.pd40 {
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px 40px;
}
.syjlkimg {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  margin-bottom: 240px;
  .img {
    width: 100%;
  }
}
.friends {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 120px;
  .img {
    box-sizing: border-box;
    width: 20%;
    height: calc(100vw / 5);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.box_product {
  padding-top: 0.25rem;
  width: 100%;
  // background: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
}
.product {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  .product_item {
    width: 50%;
    margin-top: -0.25rem;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 150px;
    .img {
      width: 97px;
      height: 97px;
      margin-bottom: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tit {
      font-size: 28px;
      font-weight: bold;
    }
    p {
      font-size: 24px;
      text-align: center;
      padding: 0 50px;
      color: #656868;
      line-height: 34px;
    }
  }
}
.helper,
.insurance {
  width: 100%;
  .tab_helper_box {
    // padding: 0 0.0625rem;
    height: 100%;
    border-bottom: 1px solid #eaeaef;
  }
  .tab_helper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    // padding: 0 0.12rem;
    div {
      box-sizing: border-box;
      border-bottom: 2px solid #ffffff;
      font-size: 28px;
      text-align: center;
      padding-bottom: 30px;
    }
  }
}
.active {
  color: #3e5ff5;
  border-bottom: 2px solid #3e5ff5 !important;
}
.help_content {
  padding: 60px 10px 0;
  box-sizing: border-box;
  width: 100%;
  .title {
    font-size: 28px;
    color: #1e2038;
    font-weight: 650;
    margin-bottom: 16px;
  }
  .stit {
    font-size: 24px;
    margin-top: 0.1rem;
    color: #565868;
    font-weight: 400;
    margin-bottom: 30px;
  }
  .tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 50px;
    div {
      box-sizing: border-box;
      margin-bottom: 0.1875rem;
      margin-right: 60px;
      min-width: 200px;
      text-align: center;
      display: flex;
      align-items: center;

      img {
        margin-right: 16px;
        width: 40px;
        height: 40px;
      }
      span {
        color: #1e2038;
        font-size: 24px;
      }
    }
  }
  .todetail {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    color: #3e5ff5;
    img {
      margin-bottom: -0.03rem;
      width: 24px;
      height: 24px;
    }
  }
  .img {
    margin-top: 30px;
    width: 100%;
    img {
      width: 100%;
    }
  }
}
</style>
